<template>
    <div class="container">
        <div class="whole-flex-center-between">
            <div>
                <el-card class="box-card">
                    <!-- <div slot="header" class="clearfix">
                        <div class="chartTitle">
                            <div class="demo-input-suffix">
                 
                                <el-date-picker
                                    v-model="selectTime"
                                    size="small"
                                    unlink-panels
                                    type="daterange"
                                    value-format="timestamp"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                                </el-date-picker>
                                <el-input
                                    size="small"
                                    placeholder="请输入商户ID"
                                    prefix-icon="el-icon-search"
                                    v-model="merchantID"
                                ></el-input>
                            </div>
                            <el-button size="mini" @click="query">查询</el-button>
                        </div>
                    </div>
                    <div id="turnoverChart" style="width:1290px;height:300px;"></div> -->
                </el-card>
            </div>
            <!-- <div style="border-color:#9966FF">
        <span>今日支付订单数</span>
        <i style="color:#9966FF">{{countInfo.today_pay_count}}</i>
      </div>
      <div style="border-color:#00CC66">
        <span>今日成交总额</span>
        <i style="color:#00CC66">{{countInfo.today_pay_money}}</i>
      </div>
      <div style="border-color:#CC33FF">
        <span>本月支付订单数</span>
        <i style="color:#CC33FF">{{countInfo.month_pay_count}}</i>
      </div>
      <div style="border-color:#FFCC00">
        <span>本月支付总额</span>
        <i style="color:#FFCC00">{{countInfo.month_pay_money}}</i>
      </div>
      <div style="border-color:#FF6666">
        <span>总支付订单数</span>
        <i style="color:#FF6666">{{countInfo.all_pay_count}}</i>
      </div>
      <div style="border-color:#33CCFF">
        <span>总支付总额</span>
        <i style="color:#33CCFF">{{countInfo.all_pay_money}}</i>
            </div>-->
        </div>
        <div class="bottom"></div>
    </div>
</template>

<script>
import Echarts from "echarts";

export default {
    data() {
        return {
            countInfo: {},
            selectTime: "",
            merchantID: "",
        };
    },
    created() {
        // const _this = this;
        // this.$axios({
        //   url: 'index/index',
        //   success(res) {
        //     if (res.data.code === 1) {
        //       _this.countInfo = res.data.content;
        //     }
        //   }
        // });
        // this.$axios({
        //   url: 'index/statistics',
        //   success(res) {
        //     if (res.data.code === 1) {
        //       const bottomChart = Echarts.init(document.querySelector(".bottom"));
        //       const con = res.data.content;
        //       _this.$nextTick(() => {
        //         const option = {
        //           title: {
        //             text: '数据统计折线图'
        //           },
        //           tooltip: {
        //             trigger: 'axis'
        //           },
        //           legend: {
        //             data:['成交订单','成交总额', '每日新增用户']
        //           },
        //           grid: {
        //             left: '3%',
        //             right: '4%',
        //             bottom: '3%',
        //             containLabel: true
        //           },
        //           xAxis: {
        //             type: 'category',
        //             boundaryGap: false,
        //             data: con.result_date
        //           },
        //           yAxis: {
        //             type: 'value'
        //           },
        //           series: [
        //             {
        //               name:'成交订单',
        //               type:'line',
        //               data: con.result_count
        //             },
        //             {
        //               name:'成交总额',
        //               type:'line',
        //               data: con.result_money
        //             },
        //             {
        //               name:'每日新增用户',
        //               type:'line',
        //               data: con.result_user_count
        //             }
        //           ]
        //         };
        //         bottomChart.setOption(option);
        //       });
        //     }
        //   }
        // });

        this.getTurnoverData();
    },
    methods: {
        query(){
            this.getTurnoverData();
        },
        getTurnoverData() {
            let _this=this;
            this.$axios({
                url: "/order/statistical",
                data:{
                    userID:_this.merchantID?_this.merchantID:'',
                    startTime:_this.selectTime[0]?_this.selectTime[0]/1000:'',
                    endTime:_this.selectTime[1]?_this.selectTime[1]/1000:'',
                    type:1
                },
                success(res) {
                    if (res.data.code === 200) {
                        let chartData=res.data.content;
                        _this.drawTurnoverChart(chartData);
                    }else{

                    }
                }
            });
        },
        drawTurnoverChart(data) {
            let myChart = this.$echarts.init(
                document.getElementById("turnoverChart")
            );
            const option = {
                tooltip: {
                    show: true,
                    trigger: "axis",
                    position: function (pt) {
                        return [pt[0], "10%"];
                    },
                },
                title: {
                    left: "center",
                    text: "交易统计图",
                },
                toolbox: {
                    show: false,
                    feature: {
                        dataZoom: {
                            yAxisIndex: "none",
                        },
                        restore: {},
                        saveAsImage: {},
                    },
                },
                xAxis: {
                    name: "日期",
                    type: "category",
                    data:data.data,
                    boundaryGap: false,
                    axisLabel: {
                        interval: 'auto',
                        margin: 8,
                    },
                },
                yAxis: {
                    name: "单位:万",
                    type: "value",
                    boundaryGap: [0, "30%"],
                },
                series: [
                    {
                        name: "交易额",
                        type: "line",
                        areaStyle: {},
                        showSymbol:'auto',
                        data: data.money,
                    },
                    {
                        name: "成交量",
                        type: "line",
                        areaStyle: {},
                        showSymbol:'auto',
                        data: data.count,
                    },
                ],
            };
            myChart.setOption(option);
        },
    },
};
</script>
<style scoped>
.chartTitle {
    display: flex;
}
.demo-input-suffix {
    width: 550px;
    display: flex;
    justify-content: space-between;
}
.demo-input-suffix /deep/ .el-range-editor--small  .el-range-separator {
  width: 25px !important;
}
.el-input {
    width: 180px;
    margin-right:10px;
}
/* .top > div {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 180px;
  height: 180px;
  margin: 30px 0;
  border: 1px solid #666;
  border-radius: 50%;
}
.top span {
  display: block;
  width: 100%;
  font-size: 17px;
  line-height: 1.5;
  text-align: center;
}
.top i {
  display: block;
  width: 100%;
  font-size: 25px;
  font-style: normal;
  line-height: 1.5;
  text-align: center;
} */
/* .bottom {
  height: 500px;
  margin: 0 100px 100px;
} */
</style>
